<template>
    <span style="display:inline-block">
        <el-image v-if="type == 'picture'" ref="img"
                  :src="currentSrc"
                  :initial-index="4" fit="cover" :hide-on-click-modal="true"
        />
        <img v-else class="file-icon" :src="currentSrc"/>
        <!-- <img class="file-icon" :src="file.row.path" v-if="file.row.type == 'png'" /> -->
    </span>
</template>

<script>
import FolderIcon from '../assets/icons/folder.svg'
import UnknownIcon from '../assets/icons/icon.svg'
import ExeIcon from '../assets/icons/exe.svg'
import {ElMessage} from "element-plus";
import strings from "../service/strings";

export default {
    // 定义组件所需的属性
    props: {
        /**
         *@property {FileItem}
         */
        file: {
            type: Object,
            required: true
        },
        ext: {
            type: String
        }
    },
    data() {
        return {
            currentSrc: FolderIcon,
            currentPreview: FolderIcon,
            type: 'icon'
        }
    },
    mounted() {
        const type = this.file.type.toLowerCase(); // 拿到文件类型
        if (strings.isImage(type)) {
            this.currentSrc = this.file.thumb || UnknownIcon; // 图片
            this.currentPreview = this.file.path || UnknownIcon; // 图片
            this.type = 'picture';
        } else if (type == 'exe') {
            this.currentSrc = ExeIcon; // 图片
        }
    },
    methods: {
        showPreview(file) {
//
//             ElMessage('暂不支持此文件的预览');
            const img = this.$refs.img;
            img.clickHandler();
            console.log(file)
        }
    }
}
</script>

<style scoped>
.file-icon {
    width: 100%;
}
</style>